<script lang="ts" setup>
import { ref, computed, watch, onMounted } from 'vue';
import PageCaontainer from '@/arco-components/PageContainer';
import { useRouter, useRoute } from 'vue-router';
import * as RouteNames from '@/router/consts';
import { useStore } from '@/store';
import CreateTable from './components/createTable/index.vue'
import CreateEditDrawer from './components/createEditDrawer/index.vue'
const loading = ref<boolean>(false);
const router = useRouter();
const createDrawerRef = ref();
const createTableRef:any=ref();
const createApproval = () => {
    createDrawerRef.value.visibleFn()
}
const handleSuccess = () => {
    createTableRef.value.handleSuccessResult()
}

</script>

<template>
    <PageCaontainer>
        <template #extra>
            <a-button
                type="primary"
                @click="createApproval"
            >+创建需求</a-button
        ></template>
        <a-card class="approval-center-card">
            <CreateTable ref="createTableRef" />
        </a-card>
    </PageCaontainer>
    <CreateEditDrawer 
        ref="createDrawerRef"
        title="新建需求"
        @createdSuccess="handleSuccess"
    />
</template>

<style lang="scss" scoped>

.approval-center-card {
    height: 100%;
    overflow: auto;
    border: none;
    :deep(.arco-card-body) {
        padding: 12px 0 18px;
        .arco-table-border .arco-table-container {
            border-left: none;
            border-top: none;
            border-right: none;
        }
    }
    :deep(.arco-divider-horizontal) {
        margin: 12px 0;
    }
}
</style>